<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加地址</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }

        .list-block {
            margin: 0;
            padding: 0;
        }

        .item-inner .label {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .list-block input[type=text] {
            height: 0.9rem;
            font-size: 0.15rem;
            font-family: MicrosoftYaHei;
            color: rgba(204, 204, 204, 1);
            line-height: 0.9rem;
        }

        .list-block input[type=number] {
            height: 0.9rem;
            font-size: 0.15rem;
            font-family: MicrosoftYaHei;
            color: rgba(204, 204, 204, 1);
            line-height: 0.9rem;
        }
        .defaultOpt .yes {
            height: 0.5rem;
            width: 0.5rem;
            text-align: center;
            background-color: #FF9326;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            line-height: 2.5rem;
			margin-left: -0.24rem;
        }

        .defaultOpt .no {
            height: 0.5rem;
            width: 0.5rem;
			text-align: center;
            background: rgba(221, 221, 221, 1);
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            line-height: 2.5rem;
			margin-left: -0.24rem;
        }

        .default {
            widows: 100%;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background: rgba(255, 255, 255, 1);
            height: 2.5rem;
            vertical-align: center;
            line-height: 2.5rem;
            margin-top: 0.6rem;
        }

        .default .defaultText {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
            margin-left: 0.7rem;
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">添加地址</h1>
        </header>
        <nav class="bar bar-tab">
            <a class="tab-item" href="../index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="../category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" href="../cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item  active" href="../personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">收货人</div>
                                <input type="text" id="name" placeholder="请输入收货人姓名">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">联系人电话</div>
                                <div class="item-input">
                                    <input type="number" id="mobile" placeholder="请输入联系人电话">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">所在地区</div>
                                <div class="item-input">
                                    <input type="text" id="area-picker" placeholder="请选择所在地区" class="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">详细地址</div>
                                <div class="item-input">
                                    <input type="text" id="detailAddr" placeholder="请输入详细地址" class="">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="default" onclick="changeDefault(this)">
                <div class="defaultText">默认地址</div>
                <div class="defaultOpt">
                    <span class="no">&nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                </div>
            </div>
            <div class="row" style="margin-top: 0.5rem;">
                <div class="col-100">
                    <a href="javascript:saveAddress();" class="button button-warning">保存</a>
                </div>
            </div>
        </div>
    </div>
        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script type="text/javascript" src="http://g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/index.js" charset="utf-8"></script>
</body>
<script>
	var addressId;
	var userId="1";
    $("#area-picker").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
					<button class="button button-link pull-right close-picker">确定</button>\
					<h1 class="title">选择所在区域</h1>\
					</header>'
    });
	$(function(){
		addressId = window.location.search.split("=")[1];
		if(addressId){
			$.getJSON(prefix+"/userAddress/api/getAddressById/"+addressId,function(data){
				var addressInfo = data.data;
				userId = data.data.flUserId;
				$("#name").val(addressInfo.flName);
				$("#mobile").val(addressInfo.flPhone);
				$("#area-picker").val(addressInfo.flProvince+" "+addressInfo.flCity+" "+addressInfo.flArea);
				$("#detailAddr").val(addressInfo.flDetailAddr);
				if(addressInfo.flIsDefault == 1){
					$(".defaultOpt span").attr("class","yes");
					$(".defaultOpt span").html("&nbsp;√&nbsp;");
				}
			})
		}
	});
    /**
     * 修改默认地址
     */
    function changeDefault(obj) {
        if ($(obj).find("span").attr("class") == 'no') {
            $(obj).find("span").attr("class", "yes");
            $(obj).find("span").html("");
            $(obj).find("span").html("&nbsp;√&nbsp;");
        } else {
            $(obj).find("span").attr("class", "no");
            $(obj).find("span").html("");
            $(obj).find("span").html("&nbsp;&nbsp;&nbsp;&nbsp;");
        }
    }
    /**
     * 保存地址
     */
    function saveAddress() {
        var address = $("#area-picker").val();
        var name = $("#name").val();
        var mobile = $("#mobile").val();
        var detailAddr = $("#detailAddr").val();
		var province = "";
		var city = "";
		var area = "";
        var isDefault = $(".defaultOpt").find("span").attr("class") == 'yes' ? 1 : 0;
        if (name == '' || name == null) {
            $.alert('请输入收货人姓名!');
            return;
        }
        if (mobile == '' || mobile == null) {
            $.alert('请输入联系人电话!');
            return;
        }
        if (address == '' || address == null) {
            $.alert('请选择所在地区!');
            return;
        }
        if (detailAddr == '' || detailAddr == null) {
            $.alert('请输入详细地址!');
            return;
        }
		province = address.split(" ")[0];
		city = address.split(" ")[1];
		area = address.split(" ")[2];
		
		$.post(prefix+"/userAddress/api/addOrEditAddress",{'flId':addressId,'flUserId':userId,'flProvince':province,'flCity':city,'flArea':area,
															'flDetailAddr':detailAddr,'flIsDefault':isDefault,'flName':name,'flPhone':mobile},
				function(data){
					data = JSON.parse(data);
					if(data.code == 0){
						$.alert("地址新增成功");
						window.location.href="./myAddress.html"
					}
		})
		
		
    }
</script>

</html>
